import React, { memo } from 'react'
import { ArticleItemWrapper } from './style'
import {
  CalendarOutlined,
  FileTextOutlined,
  EyeOutlined
} from '@ant-design/icons'
import moment from 'moment'
import 'highlight.js/styles/atom-one-dark.css'
import { Skeleton } from 'antd'
import RendererMarkdown from '@/utils/rendererMarkdown'
import { NavLink, withRouter } from 'react-router-dom'

function B_Article_Item(props) {
  const { userId } = props
  const { articleItem = {}, history } = props

  const handleClassify = (classifyName, classifyId) => {
    history.push(
      `/blog/category/u/${userId}/${classifyId}?classify=${classifyName}`
    )
  }

  return (
    <ArticleItemWrapper className="animate__animated animate__zoomIn base-bgc">
      {articleItem.key ? (
        <>
          <h3 className="text-center title fs-6 text-bolder pointer">
            <NavLink to={`/blog/detail?id=${articleItem.key}`}>
              {articleItem.title}
            </NavLink>
          </h3>
          <div className="detail text-center mt-3">
            <div className="up-date inline-block">
              <CalendarOutlined style={{ color: '#00a7e0' }} />
              <span className="ml-1 date-timer">
                {moment(articleItem.createTime).format('YYYY-MM-DD h:mm:ss a')}
              </span>
            </div>
            <div className="text-count inline-block ml-5">
              <FileTextOutlined />
              <span className="ml-1">
                字数统计 {articleItem.content.length}
              </span>
            </div>
            <div className="view-count inline-block ml-5">
              <EyeOutlined style={{ color: '#ec4e30' }} />
              <span className="ml-1" style={{ color: '#ec4e30' }}>
                被{articleItem.viewCount}人看爆
              </span>
            </div>
          </div>
          <div className="home-a-content content">
            <div
              className="home-a-content content"
              dangerouslySetInnerHTML={{
                __html: RendererMarkdown(articleItem.content, 250)
              }}
            ></div>
          </div>
          <div className="text-center pointer read-all">
            <NavLink to={`/blog/detail?id=${articleItem.key}`}>
              阅读全文 »
            </NavLink>
          </div>
          <div className="post-date">
            <div className="post-mouth">
              {new Date(articleItem.createTime).getMonth() + 1}月
            </div>
            <div className="post-day">
              {new Date(articleItem.createTime).getDate()}日
            </div>
          </div>
          <div
            className="post-badge"
            onClick={(e) =>
              handleClassify(articleItem.classifyName, articleItem.classifyId)
            }
          >
            <span>{articleItem.classifyName}</span>
          </div>
        </>
      ) : (
        <Skeleton active />
      )}
    </ArticleItemWrapper>
  )
}

export default memo(withRouter(B_Article_Item))
